<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        form{
            width: 1000px;
            height: 600px;
            background: pink;
            background: -webkit-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: -o-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: -moz-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            border-radius: 100%;
            margin: 0 auto;
        }
        .header{
            height: 120px;
            /* border-bottom: 1px solid rgb(160, 170, 154); */
            /* position: relative; */
            text-align: center;
            line-height: 120px;
        }
        h1{
            /* position: absolute;
            left:79px;
            top:40px; */
            text-shadow: 1px 1px 2px rgb(255, 238, 238), 0 0 25px rgb(166, 211, 224), 0 0 5px rgb(174, 174, 221);
        }
        .div-name{
            margin: 65px 70px 0 70px;
            font-weight: bold;
            font-size: 20px;
        }
        .div-pwd{
            margin: 30px 70px 89px 35px;
            font-weight: bold;
            font-size: 20px;
        }
        input{
            width: 717px;
            height: 74px;
            border-radius: 15px;
            outline: none;
            font-size: 27px;
            background: rgb(189, 186, 186);
            padding: 15px;
        }
        .send-btn{
            width: 161px;
            height: 60px;
            background: rgb(255, 255, 255) 0.1;
            color: rgb(255, 255, 255);
            border-radius: 9px;
            margin-left:420px;
            font-size: 35px;
            cursor: pointer;
            border: none;
        }
        .send-btn:hover{
            transform: scale(2);
        }
        .fa-exclamation-circle{
            color:red
        }
        .fa-check{
            color:rgb(0, 255, 8)
        }
    </style>
</head>
<body>
    <form action="">
        <div class="header"><h1>表单</h1></div>
        <div class="div-name">Your Name: <input type="text" class="input-name" placeholder="来 输入用户名！"></div>
        <div class="div-pwd">Your Password: <input type="password" class="input-pwd" placeholder="来 输入密码！"></div>
        <button disabled class="send-btn">Send</button>
    </form>
    <script>
        var nameEle = document.querySelector('.input-name')
        var pwdEle = document.querySelector('.input-pwd')   
        var sendEle = document.querySelector('.send-btn')
        var div_nameEle = document.querySelector('.div-name')
        var div_pwdEle = document.querySelector('.div-pwd')
        var pwdFlag = false
        var nameFlag = false
        pwdEle.onblur = function(){
            var reg = /^([a-zA-Z0-9]){8,15}$/
            var str = pwdEle.value
            var result = reg.test(str)
            if(result){
                var warningEle = document.querySelector('.warning')
                pwdFlag = true
                // var ele = document.creatElement('div')
                // ele.innerHTML = "<i class='fa fa-check'></i>"
                // ele.setAttribute('class','warning')
                // div_pwdEle.appendChild(ele)
                if(warningEle){
                    warningEle.remove()
                }
            }else{
                var warningEle = document.querySelector('.warning')
                pwdFlag = false
                if(!warningEle){
                    var ele = document.createElement('div')
                    ele.innerHTML = "<i class='fa fa-exclamation-circle'>密码格式错误,Password的长度不小于8位,不大于15位</i>"
                    ele.setAttribute('class','warning')
                    div_pwdEle.appendChild(ele)
                }
            }
            sendEle.disabled = !(nameFlag&&pwdFlag)
        }
        nameEle.onblur = function(){
            var reg = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{4,16}$/
            var str = nameEle.value
            var result = reg.test(str)
            if(result){
                var warningEle = document.querySelector('.warning')
                nameFlag = true
                // var ele = document.creatElement('div')
                // ele.innerHTML = "<i class='fa fa-check'></i>"
                // ele.setAttribute('class','warning1')
                // div_nameEle.appendChild(ele)
                if(warningEle){
                    warningEle.remove()
                }
            }else{
                var warningEle = document.querySelector('.warning')
                nameFlag = false
                if(!warningEle){
                    var ele = document.createElement('div')
                    ele.innerHTML = "<i class='fa fa-exclamation-circle'>用户名格式错误,Name的长度不小于4位,不大于16位</i>"
                    ele.setAttribute('class','warning')
                    div_nameEle.appendChild(ele)
                }
            }
            sendEle.disabled = !(nameFlag&&pwdFlag)
        }
        sendEle.onclick = function(){
            alert('起飞！')
        }
    </script>
</body>
</html>